<template>
    <div class="map-container">
        <div ref="mapRef" id="map-container"></div>
    </div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ipLocation, getLocation, reverseGeocoder } from '@/apis/ip'
import axios from 'axios'

const props = defineProps(['inputValue', 'latValue', 'lngValue'])
const emits = defineEmits(['close', 'change'])

const address = ref('')
const mapRef = ref()

//初始默认坐标
const lat = ref(22.546693)
const lng = ref(114.032687)

let city = ''
let province = ''
let district = ''
let adcode = ''

let markers: any, map: any

const TMap = (window as any).TMap

const inputVal = ref('')
//地名
const addrName = ref('')

watchEffect(() => {
    inputVal.value = props.inputValue
    if (props.latValue) {
        lat.value = Number(props.latValue)
        lng.value = Number(props.lngValue)
    }

    console.log(lng.value, lat.value, mapRef.value && !map)
    if (mapRef.value && !map) {
        console.log('data', props.inputValue)
        if (address.value === '') {
            address.value = inputVal.value
        }

        //根据ip获取坐标 如果默认地址没有则通过ip获取
        // if (address.value == '') {
        //     console.log('根据ip获取坐标')
        //     axios.get('https://api.ipify.org').then(ip => {
        //         ipLocation(ip.data).then(res => {
        //             if (Number(res.data.code) === 200) {
        //                 lat.value = res.data.result.lat
        //                 lng.value = res.data.result.lng
        //             }
        //         })
        //     })
        // }
        //初始化地图
        map = new TMap.Map(mapRef.value, {
            zoom: 14,
            center: new TMap.LatLng(lat.value, lng.value)
        })

        markers = new TMap.MultiMarker({
            map: map, //指定地图容器
            //点标记数据数组
            geometries: [
                {
                    id: '1', //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                    position: new TMap.LatLng(lat.value, lng.value) //点标记坐标位置
                }
            ]
        })

        getLocationByInput()

        //监听点击事件添加marker
        map.on('click', (evt: any) => {
            console.log('click', evt)
            markers.updateGeometries([
                {
                    id: '1',
                    position: evt.latLng
                }
            ])
            lat.value = evt.latLng.lat
            lng.value = evt.latLng.lng
            if (evt.poi) {
                addrName.value = evt.poi.name
            } else {
                addrName.value = ''
            }
            emits('change', {
                address: '',
                adcode: '',
                lat: '',
                lng: '',
                regionName: ''
            })
            console.log('inputVal', inputVal.value)
            reverseGeocoder(evt.latLng.lat, evt.latLng.lng).then(res => {
                if (Number(res.data.code) === 200) {
                    address.value = res.data.result.address
                    adcode = res.data.result.regionId
                    const regionName = res.data.result.regionName.split(',')
                    console.log('regionName', regionName)
                    let name = regionName[regionName.length - 1]
                    emits('change', {
                        address: address.value + addrName.value,
                        adcode: adcode,
                        lat: lat.value,
                        lng: lng.value,
                        regionName: name
                    })
                }
            })
        })
    } else if (mapRef.value && map) {
        console.log(inputVal.value, lat.value, lng.value)
        if (inputVal.value !== '' && inputVal.value !== address.value) {
            console.log('换算', inputVal.value, address.value, inputVal.value == address.value)
            address.value = inputVal.value
            getLocationByInput()
        }
    }
})

//通过输入地址转换坐标
const getLocationByInput = () => {
    console.log(address.value, lat.value, lng.value)
    if (address.value) {
        getLocation(address.value).then(res => {
            console.log('地址转换坐标', res)
            if (Number(res.data.code) === 200) {
                if (res.data.result) {
                    markers.updateGeometries([
                        {
                            id: '1',
                            position: new TMap.LatLng(res.data.result.lat, res.data.result.lng)
                        }
                    ])
                    map.setCenter(new TMap.LatLng(res.data.result.lat, res.data.result.lng))

                    lat.value = res.data.result.lat
                    lng.value = res.data.result.lng
                    adcode = res.data.result.regionId

                    emits('change', {
                        address: address.value,
                        adcode: adcode,
                        lat: lat.value,
                        lng: lng.value
                    })
                }
            }
        })
    }
}
</script>
